<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>首页内容页</title>
	<!-- 基本框架 -->
	<link rel="stylesheet" href="../../../css/common.css">
	<script src="../../../script/vue.min.js" type="text/javascript"></script>
	<script src="../../../script/frame.js" type="text/javascript"></script>
	<script src="../../../script/baseConfig.js" type="text/javascript"></script>
	<script src="../../../script/utils.js" type="text/javascript"></script>
	<script src="../../../script/common.js" type="text/javascript"></script>
	<style>
		.mine-head{
			background:#FFF;
			padding:0.4rem 0.33rem;
			padding-top:0.4rem;
		}
		.info .img{
			float:left;
			width:1.5rem;
			height:1.5rem;
			margin-top: .2rem;
			border-radius:50%;
		}
		.info .info_right{
			float:left;
			width:calc(100% - 1.5rem);
			padding-left:0.45rem;
		}
		.info .info_title h3{
			font-weight:bold;
			font-size:0.35rem;
			float:left;
			width:calc(100% - 0.6rem);
		}
		.info .info_title h3 img{
			vertical-align: middle;
			margin-top:-0.01rem;
			margin-right:0.2rem;
			width:0.4rem;
			height:0.4rem;
		}
		.info .info_title>img{
			float:right;
			width:0.47rem;
			margin-top:0.04rem;
		}
		.info .mobile{
			height: 1rem;
			line-height: 1rem;
			color: #A7A5A5;
			font-size: 0.29rem;
		}
		.tag{
			display: -webkit-box;
			overflow-x: auto;
			-webkit-overflow-scrolling:touch;
		}
		.tag::-webkit-scrollbar {
		  display: none;
		}
		.tag div{
			height:0.4rem;
			line-height:0.4rem;
			background:#F30;
			color:#FFF;
			margin-right:0.2rem;
			font-size:0.25rem;
			font-weight:200;
			padding:0px 0.15rem;
			border-radius:0.04rem;
		}
		.tag .newMeall{
			height:0.6rem;
			margin-right:-0.12rem;
		}
		.data{
			margin:0px -0.33rem;
			margin-top:0.45rem;
		}
		.data>div{
			float:left;
			width:25%;
			padding:0 0.15rem;
			text-align:center;
		}
		.data>div b{
			display: block;
			font-weight:normal;
			font-size:0.33rem;
			color:#373737;
			height:0.4rem;
			line-height:0.4rem;
		}
		.data>div span{
			display: block;
			font-size:0.26rem;
			color:#7B7B7B;
			height:0.4rem;
			line-height:0.4rem;
			margin-top:0.06rem;
		}

		.moneyDiv{
			margin-top:0.3rem;
			position:relative;
		}
		.moneyDiv .bg{
			display: block;
			border-radius:0.05rem;
			box-shadow: 0px 0px 10px #cecece;
			height: 2rem;
			width: 100%;
		}
		.moneyDiv .left{
			position:absolute;
			left:8%;
			top:46%;
			transform: translate(0,-50%);
		}
		.moneyDiv .left h3{
			color:#FFF;
			font-weight:normal;
			font-size:0.45rem;
		}
		.moneyDiv .left span{
			color:#FFF;
			display: block;
			font-size:0.27rem;
			margin-top:0.12rem;
		}
		.moneyDiv .right{
			position:absolute;
			right:7%;
			top:50%;
			transform: translate(0,-50%);
			color:#FFF;
			border:1px solid #FFF;
			font-size:0.27rem;
			padding:0.1rem 0.45rem;
			border-radius:3rem;
		}

		.mine-list{
			padding:0.25rem 0.1rem;
			padding-bottom:0.4rem;
			background:#FFF;
			margin-top:0.12rem;
		}
		.mine-list .ftitle{
			margin:0px 0.25rem;
			font-weight:600;
		}
		.mine-list .ftitle:after{
			background:#80C269;
		}
		.mine-list .li{
			float:left;
			width:25%;
			text-align:center;
			margin-top:0.42rem;
			color:#342E2E;
			position:relative;
			font-size:0.25rem;
			font-weight:normal;
		}
		.mine-list .li img{
			height:0.52rem;
			margin:0px auto;
			display: block;
			margin-bottom:0.2rem;
		}
		.mine-list .li i{
			right:0;
			top:-0.3rem;
			background:#FF2C2C;
			color:#FFF;
			position:absolute;
			font-size:0.19rem;
			font-style:normal;
			padding:0.04rem 0.09rem;
			border-radius:3rem;
		}
		.mine-list .li b{
			right:50%;
			top:-0.1rem;
			margin-right:-0.35rem;
			background:#FF2C2C;
			color:#FFF;
			position:absolute;
			font-style:normal;
			width:0.1rem;
			height:0.1rem;
			border-radius:50%;
		}
		.unlock{
			color:#d0d0d0;
			font-size:0.24rem;
			text-align:center;
			padding:0 0.3rem;
			line-height:0.4rem;
			margin-bottom:2rem;
			margin-top:0.3rem;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="mine-head">
			<div class="info clearfix">
				<!-- 未登陆 -->
				<template v-if="myInfo==null">
					<div @click="$.openUrl('common/commonUser','common/login');">
						<img src="../../../image/my/a3o.png" class="img" />
						<div class="info_right" style="padding-left:0.6rem;">
							<div class="info_title clearfix" style="margin-top:0.2rem;">
								<h3 class="ell">点击登录</h3>
								<img src="../../../image/my/mine_set.png" />
							</div>
							<div class="mobile" style="margin-top:0.15rem;height: 1.055rem; line-height:0.7rem;">登录享受更多权益</div>
						</div>
					</div>
				</template>
				<!-- 已登陆 -->
				<template v-else>
					<img :src="myInfo.avatar + '?time=' + new Date().getTime()" class="img" @click="$.openUrl('common/commonTitle','my/set',{title:'设置'});" />
					<div class="info_right" @click="$.openUrl('common/commonTitle','my/set',{title:'设置'});">
						<div class="info_title clearfix">
							<h3 class="ell">
								<!-- <img src="../../../../static/img/v3.png" /> -->
								{{myInfo.nick_name || '用户昵称'}}
							</h3>
							<img src="../../../image/my/mine_set.png" />
						</div>
						<div class="mobile">{{myInfo.mobile || '--'}}</div>
						<div class="tag clearfix" v-if="true">
							<div v-if="measure" style="background:#48be41;">{{measure}}</div>
							<div v-if="userTagByMoney" style="background:#FFC034;">{{userTagByMoney}}</div>
							<div v-if="userTagByTime" style="background:#FF6E45;" >{{userTagByTime}}</div>
							<div v-if="userTagByTask" style="background:#A46BFF;">{{userTagByTask}}</div>
						</div>
						<div class="tag clearfix" v-else>
							<img src="../../../image/my/medal1.png" class="newMeall" />
							<img src="../../../image/my/medal2.png" class="newMeall" />
						</div>
					</div>
				</template>
			</div>
			<div class="data clearfix" v-if="iosTest==false"> <!--style="margin-top:-0.2rem;"-->
				<div @click="api.sendEvent({name: 'backIndex',extra: {navIndex: 1}});">
					<b class="ell" v-text="(myInfo && myInfo.stats.accept_tasks) || 0">0</b>
					<span>做任务</span>
				</div>
				<div @click="api.sendEvent({name: 'backIndex',extra: {navIndex: 1}});">
					<b class="ell" v-text="(myInfo && myInfo.stats.pubish_tasks) || 0">0</b>
					<span>发任务</span>
				</div>
				<div @click="$.openUrl('invite/index','invite/index');">
					<b class="ell" v-text="(myInfo && myInfo.stats.invite) || 0">0</b>
					<span>邀请好友</span>
				</div>
				<div @click="api.sendEvent({name: 'backIndex',extra: {navIndex: 2}});">
					<b class="ell">0</b>
					<span>积分</span>
				</div>
			</div>
			<div class="moneyDiv" @click="$.openUrl('common/commonTitle','my/wallet',{title:'我的钱包'});" :style="{'margin-top':iosTest?'0.6rem':''}">
				<img src="../../../image/my/moneyIndexBg.png" class="bg" />
				<div class="left">
					<h3>{{balance}}</h3>
					<span>可用余额（元）</span>
				</div>
				<div class="right">钱包</div>
			</div>
		</div>
		<div class="mine-list clearfix">
			<div class="ftitle">我的服务</div>
			<div class="li" @click="$.openUrl('invite/index','invite/index');" v-if="iosTest==false">
				<img src="../../../image/my/invite.png" />
				邀请赚钱
			</div>
			<div class="li" @click="$.openUrl('common/commonTitle','my/everyDay',{title:'每日奖励'});" v-if="iosTest==false">
				<img src="../../../image/my/get_money_ico.png" />
				每日领奖
			</div>
			<!-- <div v-if="false" class="li" @click="$.openUrl('my/arbitration','my/arbitration');">
				<img src="../../../image/my/mineIcon3.png" />
				旧维权
				<i v-if="needReport">待复审</i>
			</div> -->
			<div class="li" @click="$.openUrl('my/arbitration','my/newArbitration');">
				<img src="../../../image/my/mineIcon3.png" />
				维权
				<i v-if="needReport">待复审</i>
			</div>
			<div class="li" @click="$.openUrl('common/commonTitle','my/template',{title:'任务模板'});">
				<img src="../../../image/my/mineIcon5.png" />
				模板
			</div>
			<div class="li" @click="$.openUrl('common/commonTitle','my/mail',{title:'站内信'});">
				<img src="../../../image/my/mineIcon9.png" />
				消息
				<b v-if="hasMsg"></b>
			</div>
			<div class="li" @click="$.openUrl('common/outUrlCommonTitle',CONFIG.httpConfig.web[CONFIG.env] + '/help/home?app=1&time=' + new Date().getTime(),{title:'帮助中心'});" v-if="iosTest==false">
				<img src="../../../image/my/mineIcon8.png" />
				帮助
			</div>
			<div class="li" @click="$.openUrl('common/commonTitle','my/service',{title:'联系客服'});" v-if="iosTest==false">
				<img src="../../../image/my/mineIcon7.png" />
				客服
			</div>
			<!-- <div class="li" @click="$.openUrl('common/commonTitle','my/grade',{title:'等级勋章'});" v-if="iosTest==false">
				<img src="../../../image/my/xunzhang.png" />
				等级
			</div-->
		
			<!-- <div class="li">
			<img src="../../../image/my/mineIcon2.png" />
			分站
			</div> -->
			<!-- <div class="li">
			<img src="../../../image/my/mineIcon4.png" />
			排行榜
			</div> -->
		</div>
		<div class="unlock" v-if="$.isLogin() && specail>0">再做{{specail}}个任务 解锁特殊<font color="#a2d0ff" @click="$.openUrl('common/outUrlCommonTitle',CONFIG.httpConfig.web[CONFIG.env] + '/help/detail?action=detail&type=2&id=155&app=1&time=' + new Date().getTime(),{title:'特殊权限是什么'});"> 限制</font></div>
	</div>
	<script type="text/javascript">
		apiready = function() {
			var app = new Vue({
				el:'#app',
				data:{
					iosTest:false,
					myInfo:($.getUser() && $.getUser().user_info) || null,
					hasMsg: false,
					needReport: false,
				},
				computed: {
					specail: function(){
						return this.myInfo.task_to_be_fans - this.myInfo.user_task_count;
					},
					measure: function(){
						if(this.myInfo && this.myInfo.id <= 101500){
							return '内测用户';
						}
						return null;
					},
					userTagByMoney: function(){
						if(this.balance > 100){
							return '大土豪';
						}
						return null;
					},
					userTagByTime: function(){
						if(this.myInfo && !this.myInfo.time_created){
							return null;
						}
						if(this.myInfo && (Date.now()/1000 - this.myInfo.time_created > 86400 * 7)){
							return '元老';
						}
						return '新人';
					},
					userTagByTask: function(){
						if(this.myInfo && this.myInfo.stats.accept_tasks > 10){
							return '积极分子';
						}
						return null;
					},
					balance: function(){
						if(this.myInfo && this.myInfo.balance){
							return $.parsePrice(this.myInfo.balance.balance, 2);
						}
						return '0.00';
					}
				},
				methods:{
					pageActive(){
						if($.isLogin()){
							this.fetchUserInfo();
						}else{
							this.myInfo = null;
							api.refreshHeaderLoadDone();
						}
					},
					fetchUserInfo(){
						var _this = this;
						$.ajax({
							url: '/user/summary',
							method: 'get',
							success: function(res){
								_this.myInfo = res.data;//将最新数据实时更新上去
								var user = $.getUser();//缓存也更新一下
								user.user_info = res.data;
								$.saveUser(user);
							},
							error:function(res){
								if(res.code==401){
									_this.myInfo = null;
								}
								$.toast(res.message);
							}
						});
					},
					checkMsg: function(){
						var _this = this;
						if(!$.isLogin()){
							_this.hasMsg = false;
							_this.needReport = false;
							return false;
						}
                        $.ajax({
                            url: '/user/summary?get_report=1',
                            method: 'get',
                            success: function(res){
                                _this.hasMsg = res.data.have_msg;
                                _this.needReport = res.data.need_report;
                            }
                        });
					},
				},
				mounted(){
					$.initJs(this);
					this.checkMsg();
				}
			});

			$.pullDown({
				bgColor:"#FFF",
				success:function(){
					app.pageActive();
				}
			});

			//请求网络
			api.addEventListener({
				name: 'navGetData'
			}, function(ret, err){
				//触发条件有两个：1.首次进本页面   2.mustGet必须请求
				if(ret && ret.value.navIndex == 3){
					app.pageActive();
				}
			});

			api.addEventListener({name: 'updateMyIndexPage'}, function(ret, err){
                app.pageActive();
			});
			api.addEventListener({name: 'updateMyMsg'}, function(ret, err){
                app.checkMsg();
			});
			
			// 我的消息提示
			api.addEventListener({name: 'myMsgAndReport'}, function(ret, err){
                if(!ret){
					return false;
				}
				app.hasMsg = ret.value.hasMsg;
				app.needReport = ret.value.needReport;
			});
			
			// 刷新页面
            api.addEventListener({
			    name: 'updatePageByTabNav'
			}, function(ret, err){
                if(!ret){
                    return false;
				}
				window.scrollTo(0,0);
                app.pageActive();
            });

			api.sendEvent({name: 'navInitSuccess'});
		}
	</script>
</body>
</html>
